<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/main.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/highlight.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/index.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/family-tree.css"/>
    <title>我的家族</title>
</head>
<body id="ancestor">
<header class="header">
    <c:if test="${empty familyId}">
        <input hidden="hidden" class="familyId" value="0">
    </c:if>
    <c:if test="${!empty familyId}">
        <input hidden="hidden" class="familyId" value="${familyId}"/>
    </c:if>
    <input hidden="hidden" class="pId" value="${pId}">

    <a href="#" class="black">
        <img src="${ctx}/static/h5/images/back.png" class="go-backk" alt=""/><span>返回</span></a>
    <h4>家族树</h4>
    <%--<img src="${ctx}/static/h5/images/seacher.png" class="seacher" alt=""/>--%>
    <img src="${ctx}/static/h5/images/more-btn.png" class="more-btn" alt=""/>
</header>
<div class="search_columns">
    <img src="${ctx}/static/h5/images/search.png" class="search_img"/>
    <input id="seach-button1" type="search" placeholder="搜索家族成员"/>
    <!--<span class="search_cancle">取消</span>-->
</div>
<!--查看完整家族树-->
<div id="allTree">
    <ul><li class="all_list">查看全部数据</li></ul>
</div>
<div id="shows">
    <div id="zhezhaoceng"></div>
    <div class="search_column">
        <img src="${ctx}/static/h5/images/search.png" class="search_img"/>
        <input id="seach-button" type="search" placeholder="搜索家族成员"/>
        <span class="search_cancle">取消</span>
        <div id="memberList">

        </div>
    </div>
</div>
<div id="familyTree">
    <%--<input type="hidden" id="fId" name="fId" value="<%=(Long)request.getAttribute("fId")%>"/>--%>
    <div id="myDiagramDiv" style="width:100%; height:600px"></div>
    <div id="myDiagramDiv1" style="width:100%; height:600px;display: none"></div>
</div>
</body>
<script src="${ctx}/static/h5/go.js"></script>
<script src="${ctx}/static/h5/goSamples.js"></script>
<script src="${ctx}/static/h5/js/public/highlight.js"></script>
<script src="${ctx}/static/h5/js/public/jquery-2.2.3.min.js"></script>
<script src="${ctx}/static/h5/js/public/bootstrap.min.js"></script>
<script src="${ctx}/static/h5/js/personal/family-tree.js"></script>
<script>
    $(function () {
        var userId=localStorage.getItem("userId");
        var familyId=$(".familyId").val();
        $(".black").on("click",function () {
            var url="/h5/family/family?userId="+userId+"&id="+familyId;
            $(this).attr("href",url)
        })
    })
</script>
<%--<script>--%>
    <%--option = {--%>
        <%--title : {--%>
            <%--text: '手机品牌',--%>
            <%--subtext: '线、节点样式'--%>
        <%--},--%>
        <%--tooltip : {--%>
            <%--trigger: 'item',--%>
            <%--formatter: "{b}: {c}"--%>
        <%--},--%>
        <%--toolbox: {--%>
            <%--show : true,--%>
            <%--feature : {--%>
                <%--mark : {show: true},--%>
                <%--dataView : {show: true, readOnly: false},--%>
                <%--restore : {show: true},--%>
                <%--saveAsImage : {show: true}--%>
            <%--}--%>
        <%--},--%>
        <%--calculable : false,--%>

        <%--series : [--%>
            <%--{--%>
                <%--name:'树图',--%>
                <%--type:'tree',--%>
                <%--orient: 'horizontal',  // vertical horizontal--%>
                <%--rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}--%>
                <%--nodePadding: 20,--%>
                <%--symbol: 'circle',--%>
                <%--symbolSize: 40,--%>
                <%--itemStyle: {--%>
                    <%--normal: {--%>
                        <%--label: {--%>
                            <%--show: true,--%>
                            <%--position: 'inside',--%>
                            <%--textStyle: {--%>
                                <%--color: '#cc9999',--%>
                                <%--fontSize: 15,--%>
                                <%--fontWeight:  'bolder'--%>
                            <%--}--%>
                        <%--},--%>
                        <%--lineStyle: {--%>
                            <%--color: '#000',--%>
                            <%--width: 1,--%>
                            <%--type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'--%>
                        <%--}--%>
                    <%--},--%>
                    <%--emphasis: {--%>
                        <%--label: {--%>
                            <%--show: true--%>
                        <%--}--%>
                    <%--}--%>
                <%--},--%>
                <%--data: [--%>
                    <%--{--%>
                        <%--name: '手机',--%>
                        <%--value: 6,--%>
                        <%--symbolSize: [90, 70],--%>
                        <%--symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',--%>
                        <%--itemStyle: {--%>
                            <%--normal: {--%>
                                <%--label: {--%>
                                    <%--show: false--%>
                                <%--}--%>
                            <%--}--%>
                        <%--},--%>
                        <%--children: [--%>
                            <%--{--%>
                                <%--name: '小米',--%>
                                <%--value: 4,--%>
                                <%--symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',--%>
                                <%--itemStyle: {--%>
                                    <%--normal: {--%>
                                        <%--label: {--%>
                                            <%--show: false--%>
                                        <%--}--%>
                                    <%--}--%>
                                <%--},--%>
                                <%--symbolSize: [60, 60],--%>
                                <%--children: [--%>
                                    <%--{--%>
                                        <%--name: '小米1',--%>
                                        <%--symbol: 'circle',--%>
                                        <%--symbolSize: 20,--%>
                                        <%--value: 4,--%>
                                        <%--itemStyle: {--%>
                                            <%--normal: {--%>
                                                <%--color: '#fa6900',--%>
                                                <%--label: {--%>
                                                    <%--show: true,--%>
                                                    <%--position: 'right'--%>
                                                <%--},--%>

                                            <%--},--%>
                                            <%--emphasis: {--%>
                                                <%--label: {--%>
                                                    <%--show: false--%>
                                                <%--},--%>
                                                <%--borderWidth: 0--%>
                                            <%--}--%>
                                        <%--}--%>
                                    <%--},--%>
                                    <%--{--%>
                                        <%--name: '小米2',--%>
                                        <%--value: 4,--%>
                                        <%--symbol: 'circle',--%>
                                        <%--symbolSize: 20,--%>
                                        <%--itemStyle: {--%>
                                            <%--normal: {--%>
                                                <%--label: {--%>
                                                    <%--show: true,--%>
                                                    <%--position: 'right',--%>
                                                    <%--formatter: "{b}"--%>
                                                <%--},--%>
                                                <%--color: '#fa6900',--%>
                                                <%--borderWidth: 2,--%>
                                                <%--borderColor: '#cc66ff'--%>

                                            <%--},--%>
                                            <%--emphasis: {--%>
                                                <%--borderWidth: 0--%>
                                            <%--}--%>
                                        <%--}--%>
                                    <%--},--%>
                                    <%--{--%>
                                        <%--name: '小米3',--%>
                                        <%--value: 2,--%>
                                        <%--symbol: 'circle',--%>
                                        <%--symbolSize: 20,--%>
                                        <%--itemStyle: {--%>
                                            <%--normal: {--%>
                                                <%--label: {--%>
                                                    <%--position: 'right'--%>
                                                <%--},--%>
                                                <%--color: '#fa6900',--%>
                                                <%--brushType: 'stroke',--%>
                                                <%--borderWidth: 1,--%>
                                                <%--borderColor: '#999966',--%>
                                            <%--},--%>
                                            <%--emphasis: {--%>
                                                <%--borderWidth: 0--%>
                                            <%--}--%>
                                        <%--}--%>
                                    <%--}--%>
                                <%--]--%>
                            <%--},--%>
                            <%--{--%>
                                <%--name: '苹果',--%>
                                <%--symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',--%>
                                <%--symbolSize: [60, 60],--%>
                                <%--itemStyle: {--%>
                                    <%--normal: {--%>
                                        <%--label: {--%>
                                            <%--show: false--%>
                                        <%--}--%>

                                    <%--}--%>
                                <%--},--%>
                                <%--value: 4--%>
                            <%--},--%>
                            <%--{--%>
                                <%--name: '华为',--%>
                                <%--symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',--%>
                                <%--symbolSize: [60, 60],--%>
                                <%--itemStyle: {--%>
                                    <%--normal: {--%>
                                        <%--label: {--%>
                                            <%--show: false--%>
                                        <%--}--%>

                                    <%--}--%>
                                <%--},--%>
                                <%--value: 2--%>
                            <%--},--%>
                            <%--{--%>
                                <%--name: '联想',--%>
                                <%--symbol: 'image://http://www.lenovo.com.cn/HomeUpload/Home001/6d94ee9a20140714.jpg',--%>
                                <%--symbolSize: [100, 40],--%>
                                <%--itemStyle: {--%>
                                    <%--normal: {--%>
                                        <%--label: {--%>
                                            <%--show: false--%>
                                        <%--}--%>

                                    <%--}--%>
                                <%--},--%>
                                <%--value: 2--%>
                            <%--}--%>
                        <%--]--%>
                    <%--}--%>
                <%--]--%>
            <%--}--%>
        <%--]--%>
    <%--};--%>

<%--</script>--%>
</html>
